<template>
	<view class="createOrder">
		<view class="">
			<view class="cu-list menu">
				<view class="cu-item arrow" @click="goto('/pages/my/set/address/index')">
					<view class="padding">
						<view class="text-lg text-bold">{{addressInfo.name}} {{addressInfo.phone}}</view>
						<view class="margin-top-sm text-gray">{{addressInfo.address}}{{addressInfo.remark}}</view>
					</view>
				</view>
			</view>
			<view class="border"></view>
			<view class="padding bg-white text-lg text-bold">商品</view>
			<view class="padding flex bg-white">
				<!-- <image src="../../../static/logo.png" class="image"></image> -->
				<image :src="config.url + '/lsqApi' + goodsInfo.imagePath.split(',')[0]" class="image"></image>
				<view class="margin-left-sm">
					<view class="text-lg text-bold">{{goodsInfo.name}}</view>
					<view class="text-gray margin-top-xs">{{goodsInfo.ms}}</view>
				</view>
			</view>
			<view class="bg-white margin-top">
				<view class="cu-list menu">
					<view class="cu-item">
						<view>优惠券</view>
						<view>无</view>
					</view>
					<view class="cu-item">
						<view>商品单价</view>
						<view v-if="goodsInfo.type == 2">￥{{goodsInfo.price}} 积分</view>
						<view v-else>￥{{goodsInfo.price}} 绑定积分</view>
					</view>
					<view class="cu-item">
						<view>数量</view>
						<view  v-if="goodsInfo.name.includes('话费')">1</view>
						<input type="number" v-else v-model="formData.goodsNum" placeholder="请输入购买数量"/>
					</view>
					<view class="cu-item text-right" v-if="goodsInfo.name.includes('话费')">
						<view>充值手机号码</view>
						<input v-model="formData.phone" placeholder="请输入需要充值的手机号码"/>
					</view>
					<view class="cu-item">
						<view>商品合计</view>
						<view v-if="goodsInfo.type == 2">￥{{formData.totalPrice}} 积分</view>
						<view v-else>￥{{formData.totalPrice}} 绑定积分</view>
					</view>
					<view class="cu-item">
						<view>运费</view>
						<view>￥0</view>
					</view>
					<view class="cu-item">
						<view>应付金额</view>
						<view v-if="goodsInfo.type == 2">￥{{formData.totalPrice}} 积分</view>
						<view v-else>￥{{formData.totalPrice}} 绑定积分</view>
					</view>
					<view class="cu-item">
						<view>支付方式</view>
						<view>积分余额</view>
					</view>
				</view>
			</view>
			<view class="margin-xl padding-xl"></view>
			<view class="myBar cu-bar bg-white tabbar border shop" style="position: fixed; width: 750rpx; bottom: 0;">
				<view style="width: 60%;" class="padding-lr text-lg text-bold">
					<text>应付金额：</text>
					<text class="text-red" v-if="goodsInfo.type == 2">￥{{formData.totalPrice}} 积分</text>
					<text class="text-red" v-else>￥{{formData.totalPrice}} 绑定积分</text>
				</view>
				<view  class="bg-red submit" @click="submit">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
import addressApi from '../../../api/new/addressApi'
import orderApi from '../../../api/new/orderApi'
import productApi from '../../../api/new/productApi'
import config from '../../../config'
	export default{
		data() {
			return {
				config,
				addressInfo: "",
				id: "",
				formData: {
					goodsNum: "",
					totalPrice: "",
					phone: ""
				},
				goodsInfo: "",
			}
		},
		watch:{
			"formData.goodsNum"(cur) {
				this.formData.totalPrice = Number(cur) * Number(this.goodsInfo.price)
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				addressApi.addressList().then(res => {
					const index = res.rows.findIndex(item => item.mr == 1)
					if (index != -1) {
						this.addressInfo = res.rows[index]
					} else  {
						this.addressInfo = res.rows[0]
					}
				})
				this.getGoodsDetail()
			},
			getGoodsDetail() {
				productApi.detail({id: this.id}).then(res => {
					this.goodsInfo = res.data
					this.formData.goodsNum = 1
				})
			},
			validate() {
				if (!this.formData.goodsNum || this.formData.goodsNum < 1) {
					uni.showToast({
						title: "请输入购买商品数量",
						icon: "none"
					})
					return false
				}
				if (this.goodsInfo.name.includes('话费')) {
					if (!this.formData.phone) {
						uni.showToast({
							title: "请输入充值手机号码",
							icon: "none"
						})
						return false
					}
				}
				return true
			},
			submit() {
				if (!this.validate()) {
					return
				}
				uni.showModal({
					title: "是否提交订单",
					success:(res) => {
						if (res.confirm){
							orderApi.addOrder({
								goodsCount: this.formData.goodsNum,
								goodsId: this.goodsInfo.id,
								goodsPrice: this.goodsInfo.price,
								sjrAddress: this.addressInfo.address,
								sjrName: this.addressInfo.name,
								sjrPhone: this.addressInfo.phone,
								totalPrice: this.formData.totalPrice
								// ...this.formData,
								// ...this.goodsInfo,
								// ...this.addressInfo,
								// goodsId: this.goodsInfo.id
							}).then(res => {
								uni.redirectTo({
									url: "/pages/shop/createOrder/success"
								})
							})
						} else {
							console.log("取消支付")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.createOrder{
		.border{
			border-top: 1px solid #d0d0ce;
		}
		.image{
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>